<script type="text/x-template" id="poster-similarity">
    <el-form :model="posterSimilarity" label-width="100px" :rules="rules" ref="posterSimilarityForm">
        <el-form-item label="上传海报">
            <el-upload class="upload-demo"
                       accept="image/jpeg,image/jpg,image/png"
<#--                       :action="urls.checkSimilarity"-->
<#--                       :http-request="uploadFile"-->
                       ref="upload"
                       :before-upload="beforeUpload"
                       drag
                       multiple
                       list-type="picture-card"
                       :on-change="onchange"
<#--                       :file-list="fileList"-->
                       :auto-upload="false">
            </el-upload>

        </el-form-item>
        <el-form-item>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <el-button style="margin-left: 10px;" size="small" type="warning" @click="empty">清空</el-button>
        </el-form-item>

        <el-form-item v-if="posterShow">
             <poster-row :data="similarPosters"></poster-row>
        </el-form-item>
    </el-form>
</script>

<script>
    Vue.component('poster-similarity', {
        template: '#poster-similarity',
        data: function () {
            return {
                similarPosters:[],
                formLoading: false,
                posterShow: false,
                isUploadShowHide: true,
                posterSimilarity:{

                },
                fileData: new FormData(),  // 文件上传数据（多文件合一）
                fileList: [],   // upload多文件数组
                uploadData: {
                    fieldData: {
                        id: '', // 机构id,
                    }
                },
                rules: {

                },
                urls: {
                    //分页数据接口
                    checkSimilarity: '/v1/aiPoster/checkSimilarity.html',
                },
            };
        },
        methods: {
            onchange(f, list) {
                // console.log("this.$refs.upload", this.$refs.upload.uploadFiles)
            },
            empty(){
                this.$refs.upload.clearFiles()
            },
            submitUpload() {
                if (this.$refs.upload.uploadFiles.length == 0){
                    this.$message({
                        message: '请上传图片'
                    })
                }else {
                    this.formData = new FormData()
                    this.$refs.upload.uploadFiles.forEach((_) => {
                        this.formData.append('file',_.raw,_.name)
                    })
                    this.ajaxUpload(this.urls.checkSimilarity,  this.formData, function (result) {
                            if (result.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: "操作成功！"
                                })
                                if(result.data && result.data.length > 0){
                                    this.similarPosters = result.data
                                    this.posterShow = true
                                }else {
                                    this.$message({
                                        message: '没有相似图片'
                                    })
                                }
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: result.msg
                                })
                            }
                        }.bind(this)
                    );
                }
            },
            // 上传文件
            uploadFile(file) {
                this.fileData.append('file', file.file, file.name);  // append增加数据
            },
            beforeUpload(file) {

            },
            cancel(){

            },
            submit(){

            }
        },
        watch: {},
        mounted() {

        },
        created() {
        }
    })
</script>

<style>

</style>